<template>
  <div class="org-tree-wrapper">
    <el-tree
      class="org-tree"
      :data="list"
      node-key="id"
      default-expand-all
      highlight-current
      :expand-on-click-node="false"
      :props="{
        label: 'deptName',
        children: 'organizationTreeVo',
      }"
    >
      <div
        slot-scope="{ node, data }"
        class="org-tree-label"
        :class="{ 'is-current': node.isCurrent }"
      >
        <div
          class="org-tree-label-text"
          :title="`${data.deptName} (${data.count}人) `"
          @click="onClickLabel(data)"
        >
          {{ `${data.deptName} (${data.count}人) ` }}
        </div>
        <div
          v-if="hasAuthMore"
          class="org-tree-label-right-fiexd"
          :class="{ 'is-current': node.isCurrent }"
        >
          <org-more-menu
            v-if="node.isCurrent"
            :node="node"
            :data="data"
            @open-modal="onOpenModal"
          />
          <span v-else class="org-tree-more-no-curr">
            <i class="el-icon-more"></i>
          </span>
        </div>
      </div>
    </el-tree>
    <add-dept ref="addDept" />
    <rename-dept ref="renameDept" />
    <move-dept ref="moveDept" />
    <delete-dept ref="deleteDept" />
  </div>
</template>

<script>
  import OrgMoreMenu from './OrgMoreMenu';
  import AddDept from '../modal/AddDept';
  import RenameDept from '../modal/RenameDept';
  import MoveDept from '../modal/MoveDept';
  import DeleteDept from '../modal/DeleteDept';
  import { getLocalData } from '@/utils/localStore';

  export default {
    components: {
      OrgMoreMenu,
      AddDept,
      RenameDept,
      MoveDept,
      DeleteDept,
    },
    props: {
      list: {
        type: Array,
        default() {
          return [];
        },
      },
    },
    computed: {
      hasAuthMore() {
        return (getLocalData('authKeys') && getLocalData('authKeys')['ZZJG-XZBM']) || false;
      },
    },
    methods: {
      onClickLabel(data) {
        // eslint-disable-next-line no-unused-vars
        const { organizationTreeVo, ...item } = data;
        this.$emit('item-click', item);
      },
      onOpenModal(modalName, data) {
        this.$refs[modalName].onOpen(data);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-tree-label {
    position: relative;
    overflow: hidden;
    display: block;
    height: 34px;
    line-height: 34px;
    width: 100%;
    &:hover,
    &.is-current {
      .org-tree-label-right-fiexd {
        opacity: 1;
      }
    }
  }
  .org-tree-label-text {
    width: calc(100% - 50px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .org-tree-label-right-fiexd {
    opacity: 0;
    display: block;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    line-height: 34px;
    &:hover {
      background-color: #eeeeee;
    }
  }
</style>
